@import "../../static/libs/base/root.less";

.header{
  position: relative;
  height: 50px;
  background: #fff;
  .home-btn{
    display: block;
    position: absolute;
    height: 100%;
    width:50px;
    background: url(./image/home.png) no-repeat center center;
    background-size:25px 25px;
    top:0;
    left:0;
    z-index: 2;
  }
  .nav-btn{
    display: block;
    position: absolute;
    height: 100%;
    width:50px;
    background: url(./image/nav.png) no-repeat center center;
    background-size:22px 22px;
    top:0;
    right:0;
    z-index: 2;
  }
  .triangle-down{
    border-top-color:#fff;
  }
}

.side-bar{
  position: fixed;
  width:100%;
  height: 100%;
  background: rgba(0,0,0,0.2);
  z-index: 9;
  left:0;
  top:0;
  color:#fff;
  display: none;
  .container{
//    max-width: 500px;
    margin:0 auto;
    height: 100%;
    min-height: 320px;
    position: relative;
    .close-btn{
      position: absolute;
      right:50%;
      margin-right:75px;
      bottom:30px;
      width:50px;
      height: 50px;
      border-radius: 25px;
      background: #8a8a8a;
      color:#fff;
      line-height: 50px;
      text-align: center;
    }
    .content{
      background: #3a7a84;
      height: 100%;
      float: right;
      width: 200px;
      box-shadow: -2px 0px 2px #30676f;
      .transition(all 0.5s ease);
      -webkit-transform:translate(200px,0);
      .preview{
        padding:25px 0;
        border-bottom:1px solid #336d76;
        text-align: center;
        line-height: 25px;
      }
      .nav{
        margin-bottom:20px;
        li{
          height: 40px;
          line-height: 40px;
          padding-left:50px;
          background-position: 20px center;
          background-repeat: no-repeat;
          span{
            margin:0 5px;
          }
        }
        .wallet{
          background-size: 20px auto;
          background-image: url(./image/icon1.png);
          color:#f5dbc0;
        }
        .record{
          background-size:15px auto;
          background-image: url(./image/icon2.png);
        }
        .coupon{
          background-size:15px auto;
          background-image: url(./image/icon3.png);
        }
        .active{
          background-color: #36717a;
        }
      }
    }
  }
}
